.home {
  background-color: #f1f1f1;
  .banner {
    height: 350px;
    margin: 0 auto;
    [nz-carousel-content] {
      background: #364d79;
      overflow: hidden;
    }

    .carousel-item {
      height: 350px;
      display: flex;
      justify-content: center;
      align-items: center;

      // 背景毛玻璃
      .carousel-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 350px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        filter: contrast(100%) blur(30px);
        transform: scale(1.5);
        // z-index: 10;
      }

      img {
        z-index: 20;
      }
    }
  }

  .middle {
    display: flex;
    width: 980px;
    margin: 0 auto;

    // 热门
    .hot {
      width: 730px;
      background-color: #fff;

      .hot-header {
        display: flex;
        align-items: center;
        margin: 0 20px;
        padding: 30px 0 10px 0;
        border-bottom: 2px solid #ce1f08;

        .hot-title-first {
          font-size: 1.5rem;
          color: #222;
          cursor: pointer;
        }

        .hot-title {
          padding: 0 10px;
          font-size: 0.92rem;
          color: #666;
          cursor: pointer;
        }

        .hot-more {
          flex: 1;
          text-align: right;
          color: #666;
          font-size: 0.92rem;
          cursor: pointer;
        }
      }

      // 歌单
      .singer-unit {
        margin-top: 20px;

        .su-list {
          display: flex;
          flex-wrap: wrap;

          .su-item {
            width: calc(25% - 40px);
            margin: 0 20px 30px 20px;

            .fans {
              width: 100%;
              height: 140px;
              display: flex;
              align-items: flex-end;
              background-size: cover;
              background-repeat: no-repeat;

              div {
                display: flex;
                justify-content: space-between;
                width: 100%;
                padding: 5px 10px;
                font-size: 0.8rem;
                color: #ccc;
                background-color: rgba(0, 0, 0, 0.6);
                backdrop-filter: blur(2px);

                .icon-zanting:hover {
                  color: #fff;
                }
              }
            }

            .su-name {
              margin-top: 10px;
              font-size: 0.8rem;
              color: #333;
            }

            .album-img {
              width: 100%;
              height: 140px;
              background-size: cover;
              background-repeat: no-repeat;
              display: flex;
              justify-content: flex-end;
              align-items: flex-end;
              padding: 0 10px 10px 0;

              i {
                display: none;
                font-size: 25px;
                color: #eee;
              }
            }
            .album-img:hover i {
              display: block;
            }

            .ai-desc {
              margin-top: 10px;
              font-size: 0.8rem;

              p {
                margin: 0;
                padding: 0 0 5px 0;
                width: 100px;
              }
            }
            .ai-desc p:nth-child(1) {
              color: #222;
            }
            .ai-desc p:nth-child(2) {
              color: #999;
            }
          }
        }
      }

      // 榜单
      .playlist {
        display: flex;
        margin-top: 20px;
        padding: 0 10px;

        .pt-border {
          border-left: 1px solid #ccc;
        }

        .playlist-top {
          flex: 1;
          padding: 0 10px;

          .pt-header {
            display: flex;

            img {
              width: 80px;
              height: 80px;
            }

            .pt-title {
              padding: 0 10px;
              p {
                font-size: 0.9rem;
                color: #000;
                font-weight: bold;
                margin: 0;
                padding: 0;
              }

              p:nth-child(2) {
                font-size: 30px;
                color: #999;
              }
            }
          }

          .pt-list {
            .pt-item {
              display: flex;
              justify-content: space-between;
              height: 40px;
              line-height: 40px;
              cursor: pointer;

              div {
                span,
                p {
                  margin-left: 10px;
                  color: #444;
                  font-size: 0.8rem;
                }

                p {
                  margin: 0 0 0 10px;
                  padding: 0;
                  width: 160px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                i {
                  font-size: 25px;
                  color: #666;
                }
              }

              div:nth-child(1) {
                flex: 1;
              }

              div:nth-child(2) {
                display: none;
                z-index: 15;
                line-height: 45px;
              }
            }

            .pt-item:hover .pt-item-player {
              display: block;
            }
          }
        }
      }
    }

    .middle-right {
      flex: 1;
      width: 250px;
      background-color: #fff;

      // 入驻歌手
      .into-singer {
        margin-left: 20px;
        border-left: 1px solid #e1e1e1;
        border-right: 1px solid #e1e1e1;

        .is-header {
          margin: 0 20px;
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #ccc;
          font-size: 0.8rem;
        }

        .is-header span:nth-child(1) {
          font-weight: bold;
          color: #222;
        }

        .is-header span:nth-child(2) {
          color: #666;
        }

        .into-list {
          margin: 0 20px;

          .inot-item {
            margin-top: 20px;
            display: flex;
            align-items: center;
            background-color: #f4f4f4;
            border: 1px solid #e1e1e1;

            img {
              width: 62px;
              height: 62px;
              margin-right: 10px;
              cursor: pointer;
            }

            .singer-info {
              flex: 1;

              p {
                height: 31px;
                line-height: 31px;
                margin: 0;
                padding: 0 5px;
                width: 100px;
                cursor: pointer;
              }

              p:hover {
                text-decoration-color: #000;
                text-decoration-line: underline;
                text-decoration-style: solid;
              }

              .singer-name {
                font-size: 0.9rem;
                color: #333;
                font-weight: bold;
              }

              .singer-num {
                font-size: 0.8rem;
                color: #666;
              }
            }
          }
        }

        .apply-artist {
          margin: 20px;
          padding: 8px 0;
          text-align: center;
          color: #222;
          font-size: 0.8rem;
          border: 1px solid #ccc;
          border-radius: 5px;
          cursor: pointer;
        }
      }
    }
  }
}
